:root {
  --primary-color: #ffffff;
  --secondary-color: #1a1a2e;
  --accent-color: #e6e6fa;
  --surface-color: #f8f9fa;
  --background-color: var(--surface-color);
  --text-color: #1a1a2e;
  --border-color: #ddd;
  --shadow-color: rgba(0, 0, 0, 0.1);

  --correct-color: #10b981;
  --correct-background-color: #d5f5e3;

  --incorrect-border-color: #ef4444;
  --incorrect-background-color: rgba(255, 176, 169, 0.82);

  --transition-speed: 0.3s;
  --transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.dark-mode {
  --primary-color: #1a1a2e;
  --secondary-color: #ffffff;
  --accent-color: #2d3748;
  --background-color: var(--primary-color);
  --surface-color: var(--accent-color);
  --text-color: var(--secondary-color);
  --border-color: #4a5568;
  --shadow-color: rgba(0, 0, 0, 0.3);

  --correct-background-color: #2c544a;
  --incorrect-background-color: #5a2a2a;
}
